<template>
  <div class="activity-add">
    <h2 class="title">添加店铺活动</h2>
    <div class="box">
      <div v-loading="loading" class="wrapper">
        <el-form ref="form" hide-required-asterisk :model="form" label-position="right" label-width="140px">
          <el-form-item
            class="name"
            prop="name"
            label="活动名称："
          >
            <el-input
              v-model="form.name"
              clearable
              class="name-ipt"
              size="medium"
              maxlength="20"
              placeholder="请输入活动名称"
            />
          </el-form-item>
          <el-form-item prop="type" label="活动类型：">
            <el-select v-model="form.type.name" placeholder="请选择活动类型" size="medium">
              <el-option label="折扣" value="02200001" />
            </el-select>
            <el-form-item v-if="form.type.name === '02200001'" class="off" label="折扣力度：">
              <el-input
                v-model="form.type.value"
                clearable
                size="medium"
                maxlength="3"
                placeholder="请输入活动折扣"
              /> <span>折</span>
            </el-form-item>
          </el-form-item>
          <el-form-item label="活动时间：" prop="date">
            <el-date-picker
              v-model="form.date"
              size="small"
              type="datetimerange"
              value-format="timestamp"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item class="upload-box" prop="pcBanner" label="活动图片(电脑端)：">
            <el-image
              style="width: 400px; height: 90px"
              :src="qnPath(form.pcBanner)"
              fit="fill"
            />
            <image-upload :size="3072" imgname="电脑版广告图片" tip="该图片用于电脑端店铺首页的活动展示，建议尺寸1200PX*270PX" @onSuccess="pcBannerSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <el-form-item class="upload-box" prop="mobileBanner" label="活动图片(手机端)：">
            <el-image
              style="width: 300px; height: 100px"
              :src="qnPath(form.mobileBanner)"
              fit="fill"
            />
            <image-upload :size="3072" imgname="移动版广告图片" tip="该图片用于移动端店铺首页的活动展示，建议尺寸750PX*260PX" @onSuccess="mobileBannerSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <!-- 商品 -->
          <el-form-item class="pdts" label="活动商品：">
            <div class="pdts-wrapper">
              <div><el-button type="primary" icon="el-icon-plus" size="medium" plain @click="addPdts">添加活动商品</el-button></div>
              <table v-if="selectedPdts.length > 0" class="pdts-selected-table" align="left" border="0" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th>商品名称</th>
                    <th>分类</th>
                    <th>原价</th>
                    <th>活动价</th>
                    <th>库存</th>
                    <th>销量</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(pdt, index) in selectedPdts" :key="index">
                    <td>
                      <div>
                        <p class="img"><el-image style="width: 80px; height: 80px" :src="qnPath(pdt.image)" fit="fit" /></p>
                        <div class="info">
                          <p class="name">{{ pdt.name }}</p>
                          <p class="id">ID：{{ pdt.id }}</p>
                        </div>
                      </div>
                    </td>
                    <td>{{ pdt.typeValue }}</td>
                    <td>{{ pdt.unitPrice | fixedPrice }}</td>
                    <td class="price-red">{{ pdt.unitPrice * Number(form.type.value) / 10 | fixedPrice }}</td>
                    <td>{{ pdt.amount }}</td>
                    <td>{{ pdt.sales }}</td>
                    <td><el-link type="danger" :underline="false" @click="deleteSinglePdt(pdt)">删除</el-link></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="goBack">返 回</el-button>
            <el-button type="primary" @click="submitForm">发布活动</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 商品弹框 -->
      <template>
        <DialogPdts :dialogpdtsvisible="dialogPdtsVisible" :selectedlist="selectedPdts" :shopid="shopInfo.id" @ok="getSelectedPdts" @goBack="dialogPdtsVisible = false" />
      </template>
    </div>
  </div>
</template>
<script>
import DialogPdts from '../../components/DialogPdts';
import ImageUpload from '@/components/ImagesUpload';
import { add } from '@/api/activity';
import { mapGetters } from 'vuex';
export default {
  name: 'ShopActivityAdd',
  components: {
    DialogPdts,
    ImageUpload
  },
  data() {
    return {
      loading: false,
      form: {
        name: '',
        type: {
          name: '',
          value: null
        },
        date: '', // 活动时间
        pcBanner: 'web/public/init-logo.png',
        mobileBanner: 'web/public/init-logo.png'
      },
      selectedPdts: [],
      dialogPdtsVisible: false
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  methods: {
    pcBannerSuc(res) {
      this.form.pcBanner = res;
    },
    mobileBannerSuc(res) {
      this.form.mobileBanner = res;
    },
    addPdts() {
      if (!this.form.type.name || !this.form.type.value) {
        this.$message({
          message: '请先选择活动折扣类型',
          type: 'warning'
        });
        return;
      }
      this.dialogPdtsVisible = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    /**
     * @param {Object} data
     * {
     * shopId: String 店铺ID,
     * name: 活动名字
     * type： String 活动类型 02200001 折扣 02200002 满减
     * disCount： String 折扣力度 eg.七折 => '7'
     * beginTime: timestamp 开始时间
     * finishTime: timestamp 结束时间
     * imageWeb: String 网站图
     * imageApp: String app图
     * ActivityDetail: Array 选择的活动商品
     * 		[
     * 			{mdseid: String 商品ID}
     * 		]
     * }
     */
    submitForm() {
      const { name, type, pcBanner, mobileBanner, date } = this.form;
      if (!name) {
        this.$message({
          message: '请输入活动名称',
          type: 'warning'
        });
        return;
      }
      if (!type.value) {
        this.$message({
          message: '请选择活动类型',
          type: 'warning'
        });
        return;
      }
      if (!date) {
        this.$message({
          message: '请选择活动日期',
          type: 'warning'
        });
        return;
      }
      if (pcBanner === 'web/public/init-logo.png') {
        this.$message({
          message: '请添加电脑版活动图片',
          type: 'warning'
        });
        return;
      }
      if (mobileBanner === 'web/public/init-logo.png') {
        this.$message({
          message: '请添加移动版活动图片',
          type: 'warning'
        });
        return;
      }
      if (this.selectedPdts.length === 0) {
        this.$message({
          message: '请添加活动商品',
          type: 'warning'
        });
        return;
      }
      this.loading = true;
      const shopId = this.shopInfo.id;
      var activityDetail = [];
      this.selectedPdts.forEach(pdt => {
        activityDetail.push({ mdseid: pdt.id });
      });
      new Promise((resolve, reject) => {
        add({ shopId, name, type: type.name, disCount: type.value, beginTime: date[0], finishTime: date[1], imageWeb: pcBanner, imageApp: mobileBanner, activityDetail }).then(res => {
          this.loading = false;
          this.$message({
            message: '添加活动成功！',
            type: 'success'
          });
          this.form = {
            name: '',
            type: {
              name: '',
              value: null
            },
            date: '', // 活动时间
            pcBanner: 'web/public/init-logo.png',
            mobileBanner: 'web/public/init-logo.png'
          };
          this.selectedPdts = [];
          setTimeout(() => {
            this.$router.push({ name: 'ActivitiesShop', query: { reload: true }});
          }, 1000);
          resolve(res);
        }).catch(err => {
          this.loading = false;
          reject(err);
        });
      });
    },
    getSelectedPdts(list) {
      this.selectedPdts = list;
      this.dialogPdtsVisible = false;
    },
    // 删除已经选中的活动商品
    deleteSinglePdt(pdt) {
      this.selectedPdts.splice(this.selectedPdts.indexOf(pdt), 1);
    }
  }
};
</script>
<style lang="scss" scoped>
.activity-add {
	font-size: $fontSizeBase;
	background-color: #fff;
	p{
		margin: 0
  }
  .off{
    display: inline-block;
    /deep/ .el-input{
      width: 70%;
    }
  }
}
@import '@/styles/shop-activity-add.scss';
.pdts-selected-table {
 td{
    &:first-child{
      padding-right: 5px;
      width: 32%;
    }
    &.price-red{
      color: $errorColor;
    }
  }
}
</style>
